const datas = [
  { name: "闵行片区", value: 29 },
  { name: "长宁片区", value: 21 },
  { name: "青浦片区", value: 14 },
  { name: "嘉定片区", value: 36 },
];

function wordBreak(value) {
  const chars = value.split("");
  let result = "";

  for (var i = 0, len = chars.length; i < len; i++) {
    result += chars[i];

    if ((i + 1) % 5 === 0) {
      result += "\n";
    }
  }

  return result;
}

export default [
  {
    style: "height: 300rpx",
    options: {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        top: "center",
        right: "10%",
        align: "left",
        icon: "rect",
        itemWidth: 7,
        itemHeight: 7,
        itemGap: 20,
        textStyle: {
          color: "#999999",
        },
        formatter: (name) => {
          const { value } = datas.find((v) => v.name === name);
          return `${name} ${value}%`;
        },
      },
      series: [
        {
          type: "pie",
          radius: "80%",
          center: ["30%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              name: "闵行片区",
              itemStyle: {
                color: "#14c0d4",
              },
              value: 29,
            },
            {
              name: "长宁片区",
              itemStyle: {
                color: "#13a0d5",
              },
              value: 21,
            },
            {
              name: "青浦片区",
              itemStyle: {
                color: "#43d2bf",
              },
              value: 14,
            },
            {
              name: "嘉定片区",
              itemStyle: {
                color: "#2c87df",
              },
              value: 36,
            },
          ],
        },
      ],
    },
  },

  {
    inline: false,
    title: "商务区投资动态走势图",
    style: "height: 400rpx",
    options: {
      tooltip: {},
      legend: {
        top: "0%",
        right: "0%",
        align: "left",
        icon: "rect",
        itemWidth: 7,
        itemHeight: 7,
        textStyle: {
          color: "#999999",
        },
      },
      grid: {
        left: "3%",
        right: "3%",
        top: "20%",
        bottom: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          formatter: wordBreak,
        },
        data: ["2023年1月", "2月", "3月", "4月", "5月", "6月"],
      },
      yAxis: {
        type: "value",
        max: 80,
      },
      series: [
        {
          name: "闵行片区",
          type: "bar",
          stack: "total",
          barWidth: 20,
          color: "#14c0d4",
          data: [19, 13, 8, 10, 14, 15],
        },
        {
          name: "长宁片区",
          type: "bar",
          stack: "total",
          barWidth: 20,
          color: "#0b82de",
          data: [19, 13, 8, 10, 14, 15],
        },
        {
          name: "青浦片区",
          type: "bar",
          stack: "total",
          barWidth: 20,
          color: "#2663df",
          data: [19, 13, 8, 10, 14, 15],
        },
        {
          name: "嘉定片区",
          type: "bar",
          stack: "total",
          label: {
            show: true,
            position: "top",
            formatter: ({ value }) => {
              const values = {
                19: 76,
                16: 55,
                12: 36,
                10: 41,
                16: 58,
                17: 62,
              };

              return values[value];
            },
          },
          barWidth: 20,
          color: "#5245dd",
          data: [19, 16, 12, 10, 16, 17],
        },
      ],
    },
  },
];
